<template>
	<view style="padding-bottom: 120rpx;">

		<z-nav-bar :bgColor="['#3699ff', '#0075ee']" bgColorAngle="90" fontColor="#FFF" homeState="2000"
			backState="1000">
			<view class="title-box">
				<text>同行借调</text>
			</view>
		</z-nav-bar>

		<u-sticky :offsetTop="offsetTop">
			<view class="tabBox">
				<view class="subsection flex-row-center">
					<view class="tabItem" :class="{active : currentType==item.type}" v-for="(item,index) in tabList"
						:key="index" @click="changeTab(item)">
						{{item.title}}
					</view>
				</view>
			</view>
			<view style="background-color: #f5f5f5;padding: 20rpx 0;">
				<view class="search">
					<u--input v-model="keyword" clearable border="none" fontSize="12" placeholder="输入车牌号/同行名称查询"
						@blur="isSearch = false" @focus="isSearch = true" @change="searchChange" prefixIcon="search"
						prefixIconStyle="font-size: 22px;color: #909399" />
				</view>
			</view>

		</u-sticky>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="customerItem" v-for="(item,index) in list" :key="index" @click="btnClick(3,item)">
				<view class="flex-row-center-sb">
					<text class="title" style="margin-left: 15rpx;">
						同行名称：{{item.sameJobName}}
					</text>
					<view style="color: #02BFBE;font-size: 28rpx;">
						{{item.secondedStatus|secondedStatus}}
					</view>
				</view>

				<u-line color="#efefef" margin="20rpx 0"></u-line>
				<view class="text-line">
					<text class="text-name">车牌号:</text>
					<text class="text-value">{{item.carNo|filterNull}}</text>
				</view>
				<view class="text-line" v-if="item.secondedType==1">
					<text class="text-name">订单信息:</text>
					<text class="text-value">{{item.orderNo|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">借调开始时间:</text>
					<text class="text-value">{{item.startTime|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">预约借调结束时间:</text>
					<text class="text-value">{{item.estimateEndTime|filterNull}}</text>
				</view>
				<view class="text-line" v-if="item.secondedStatus == 2">
					<text class="text-name">实际借调结束时间:</text>
					<text class="text-value">{{item.actualEndTime|filterNull}}</text>
				</view>
				<template v-if="item.secondedType==1">
					<view class="text-line" v-if="item.secondedStatus == 2">
						<text class="text-name">借调天数:</text>
						<text class="text-value">{{item.actualDay||item.estimateDay||'--'}}天</text>
					</view>
					<view class="text-line" >
						<text class="text-name">借调单价:</text>
						<text class="text-value">{{item.secondedUnitPrice}}元/天</text>
					</view>
					<view class="text-line" v-if="item.secondedStatus == 2">
						<text class="text-name">借调费用:</text>
						<text class="text-value">¥{{item.totalRent||0}}</text>
					</view>
				</template>
				<view class="text-line" v-if="item.secondedType == 2 && item.carSource==6">
					<text class="text-name">托管费用:</text>
					<text v-if="item.hostingFees" class="text-value">{{item.hostingFees|filterNull}}</text>
					<text v-else class="text-value">--</text>
				</view>
				
				<view class="text-line">
					<text class="text-name">结算方式:</text>
					<text class="text-value">{{item.settlementWay|settlementWay}}</text>
				</view>

				<view v-if="item.secondedStatus==1 && item.settlementStatus == 1">
					<u-line color="#efefef" margin="20rpx 0"></u-line>
					<view class="flex-row-end">
						<view class="btn-detail" @click.stop="btnClick(4,item)">
							删除
						</view>
						<view class="btn-detail" @click.stop="btnClick(1,item)">
							编辑
						</view>
						<view class="btn-detail" @click.stop="btnClick(2,item)">
							结束借调
						</view>

					</view>
				</view>

			</view>
		</mescroll-body>

		<button type="info" class="sub-btn" @click="addSecondedCar">{{currentType==1?'新增借入车辆':'新增借出车辆'}}</button>


	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import * as secondedApi from '@/api/seconded-api.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				keyword: '',
				tabList: [{
					title: '借入车辆',
					type: 1
				}, {
					title: '借出车辆',
					type: 2
				}],
				currentType: 1,
				offsetTop: 0,
				isSearch: false,
				list: []

			};
		},
		onLoad(option) {
			//获取手机状态栏高度
			this.offsetTop = uni.getSystemInfoSync()['statusBarHeight'] + (92 / 750 * uni.getSystemInfoSync()
				.windowWidth) - 0.5;
			uni.$on('refreshSecondedList', () => {
				this.mescroll.triggerDownScroll();
			})
		},
		methods: {
			changeTab(item) {
				this.currentType = item.type;
				this.mescroll.triggerDownScroll();
			},
			upCallback(page) {
				var params = {
					pageNum: page.num,
					pageSize: page.size,
					secondedType: this.currentType,
					keyword: this.keyword,

				}
				secondedApi.secondedList(this.toParams(params)).then(res => {
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.rows); //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//搜索
			searchChange(value) {
				this.mescroll.triggerDownScroll();
			},
			changeStatus(item) {
				this.currentStatus = item;
				this.showStatus = !this.showStatus;
				this.mescroll.triggerDownScroll();
			},
			// 编辑|删除|详情
			btnClick(type, item) {
				// 借调类型
				let secondedType = this.currentType;
				switch (type) {
					case 1: //编辑
						if (secondedType == 1) { //编辑借入
							uni.navigateTo({
								url: './carIn?type=1' + '&id=' + item.id
							})
						} else { //编辑借出
							uni.navigateTo({
								url: './carOut?type=1' + '&id=' + item.id
							})
						}

						break;
					case 2: //结束借调
						uni.navigateTo({
							url: './secondedFinish?id=' + item.id
						})
						break;
					case 3: //借调详情
						uni.navigateTo({
							url: './secondedDetail?id=' + item.id
						})
						break;
					case 4: //删除借调
						this.deleteSecondOrder(item.id);
						break;
					default:
						break;
				}
			},
			// 新增借入|借出车辆
			addSecondedCar() {
				if (this.currentType == 1) { //新增借入车辆
					uni.navigateTo({
						url: './carIn?type=0'
					})
				} else { //新增借出车辆
					uni.navigateTo({
						url: './carOut?type=0'
					})
				}
			},
			// 删除借调
			deleteSecondOrder(id) {
				secondedApi.deleteSecondedOrder(id).then(res => {
					uni.$u.toast('删除成功');
					this.mescroll.triggerDownScroll();
				})
			}

		}
	};
</script>

<style lang="scss" scoped>
	.tabBox {
		padding: 20upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(90deg, #3599FF 0%, #0275ED 100%);

		.subsection {
			width: 400rpx;
			height: 60rpx;
			background: rgba(255, 255, 255, 0);
			border-radius: 30rpx;
			border: 2rpx solid #005EEC;

			.tabItem {
				width: 50%;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				color: #fff;
				font-size: 28rpx;
				background: rgba(255, 255, 255, 0);

				&.active {
					color: #2879FF;
					background: #FFFFFF;
					border-radius: 30rpx;
				}
			}
		}


	}

	.search {
		flex: 1;
		padding: 0 20rpx;
		margin: 0 20rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
	}

	.customerItem {
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 20rpx;
		margin-bottom: 20rpx;
		padding: 24rpx;
		color: #666;
		font-size: 28rpx;
	}

	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $uni-color-primary;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
	}
</style>